<template>
  <div class="loginWarp">
    <div class="back-icon" @click="$router.history.push('/')">
      <img
        src="https://www.ituring.com.cn/img/back-white.5641bdf8.svg"
        alt=""
      />
    </div>

    <el-container class="loginContainer">
      <!-- 图灵 -->
      <el-header class="header">
        <img src="./images/logo-new.6927bcac.svg" alt="" class="headerLogo" />
      </el-header>
      <el-container class="mainLoginContainer">
        <!-- 登陆区域 -->
        <el-aside width="400px" class="loginMain">
          <div class="login">
            <div class="loginHeader">
              <p>免密登录</p>
              <p>邮箱登录</p>
            </div>
            <form class="loginBody">
              <!-- 手机号 -->
              <div class="phoneInput">
                <img src="./images/tel-icon.e1b454cd.svg" alt="" />
                <input type="text" placeholder="请输入手机号" v-model="phone" />
              </div>
              <!-- 滑块 -->
              <el-row style="margin-bottom: 30px">
                <drag-verify
                  ref="dragVerify"
                  text="请按住滑块拖动"
                  successText="验证通过"
                  handlerIcon="el-icon-d-arrow-right"
                  successIcon="el-icon-circle-check"
                  :width="344"
                  :height="34"
                  handlerBg="#909399"
                >
                </drag-verify>
              </el-row>
              <!-- 验证码 -->
              <div class="verify">
                <img
                  src="https://www.ituring.com.cn/img/code-icon.eaa226c2.svg"
                  alt=""
                />
                <input type="text" placeholder="请输入验证码" v-model="code" />
                <button>获取验证码</button>
              </div>
              <!-- 登录按钮 -->
              <button class="login-btn" @click.prevent="login">登录</button>
            </form>
            <!-- 注册 -->
            <div class="loginFooter">
              <div class="loginType">
                <div class="wxRegister">
                  <img
                    src="https://www.ituring.com.cn/img/wx-logo.b2038e2c.svg"
                    alt=""
                  />
                  <span>微信注册登录</span>
                </div>
                <div class="phoneRegister">
                  <img src="./images/tel-icon.e1b454cd.svg" alt="" />
                  <span>手机注册</span>
                </div>
              </div>
              <div class="loginAgreement">
                <span>注册及代表同意</span>
                <a href="">《图灵社区用户注册协议》</a>
              </div>
            </div>
          </div>
        </el-aside>
        <!--右侧大图区域 -->
        <el-main class="bigLogo">
          <div class="logoContainer">
            <img src="./images/loginBg.png" alt="" />
          </div>
        </el-main>
      </el-container>
      <el-footer class="footer">
        <div class="contact">
          <a href="">加入我们</a>
          <span> | </span>
          <a href="">联系我们</a>
        </div>
        <div class="footMiddle">
          <span
            >京ICP备11039595号 京公网安备11010502011375 新出发京零字第东110150号
            统一社会信用代码 91110101777086608F
          </span>
        </div>
        <div class="footFooter">
          <span
            >2005-2020 © 北京图灵文化发展有限公司 · All Rights Reserved</span
          >
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import dragVerify from '../../components/dragVerify'

export default {
  name: 'Login',
  components: {
    dragVerify
  },
  data() {
    return {
      phone: '',
      code: '',
      verify: false
    }
  },
  methods: {
    validate: function () {
      if (this.phone == '' || this.code == '') {
        this.$message({
          type: 'error',
          message: '手机或验证码不能为空',
          offset: 200
        })
        return
      }
      var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (!reg.test(this.phone)) {
        this.$message({
          type: 'error',
          message: '请输入有效的手机号',
          offset: 200
        })
        return
      }
      if (this.code.length != 6) {
        this.$message({
          type: 'error',
          message: '验证码长度为6位',
          offset: 200
        })
        return
      }

      return true
    },
    login: function () {
      if (this.validate()) {
        this.$notify({
          title: '成功',
          message: '登录成功，即将跳转',
          type: 'success',
          position: 'top-left'
        })
        setTimeout(() => {
          this.$router.history.push('/')
        }, 2000)
      }
    }
  }
}
</script>

<style scoped>
.back-icon {
  height: 30px;
  width: 30px;
  display: block;
  margin: 5px auto;
  position: absolute;
  top: 10px;
  left: 10px;
  text-align: center;
  line-height: 46px;
  background: #24364b;
  cursor: pointer;
  border-radius: 50%;
}
.loginWarp {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #142131;
}

.loginContainer {
  background: rgb(247, 244, 244);
  width: 980px;
  height: 600px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
}

/* 头部LOGO */
.header {
  background-color: #142131;
  width: 980px;
  /* padding-bottom: 30px; */
}
.loginContainer .header img {
  color: #fff;
}
.headerLogo {
  margin-left: 110px;
  height: 58px;
  width: 125px;
}
.mainLoginContainer {
  width: 980px;
}

.bigLogo {
  width: 500px;
  background-color: #142131;
  /* height: 369px; */
}
.bigLogo img {
  width: 500px;
  height: 368px;
}
.footer {
  background: #000;
}

/* 登录区域 */
.loginMain {
  border-radius: 20px;
  /* border: 1px solid red; */
}
.loginMain .login {
  /* border-radius: 30px; */
  height: 100%;
  width: 100%;
  background: #fff;
}

.loginHeader {
  display: flex;
  justify-content: space-around;
  color: #a1adc5;
  font-size: 14px;
  height: 46px;
  line-height: 44px;
  margin-bottom: 40px;
  border-bottom: 1px solid #dae1e7;
}
.loginHeader p:nth-child(1) {
  color: #1e1e1e;
  border-bottom: 2px solid #3d5b96;
}

.login .loginBody {
  padding: 0 28px;
}
/* 手机登录 */
.phoneInput {
  display: flex;
  margin-bottom: 30px;
}
.phoneInput input {
  width: 308px;
  height: 26px;
}
.phoneInput img {
  height: 24px;
  width: 24px;
  margin-right: 12px;
}
/* 滑块 */
.dv_text {
  border: 1px solid #000;
}
.verify {
  display: flex;
  margin-bottom: 30px;
}
.verify img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
.verify input {
  width: 240px;
  height: 26px;
}
.verify button {
  width: 68px;
  height: 24px;
  line-height: 24px;
  text-align: right;
  color: #3d5b96;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  border: none;
  background: transparent;
  outline: none;
}
.login-btn {
  background: #c3c9d5;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 100%;
  outline: none;
}
/* 底部 */
.loginFooter {
  /* display: flex; */
  margin-top: 50px;
  padding: 0 28px;
}
.loginFooter .loginType {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 30px;
}
.wxRegister {
  display: flex;
  align-items: center;
}
.wxRegister img {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  /* line-height: 24px; */
}
.phoneRegister {
  display: flex;
  align-items: center;
}
.phoneRegister img {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}
/* 注册及代表 */
.loginAgreement {
  text-align: center;
}
.loginAgreement a {
  color: #3d5b96;
}

.footer {
  text-align: center;
  background-color: #142131;
}
.footer .contact {
  margin-bottom: 15px;
  color: #fff;
}
.footer .contact a {
  color: #fff;
  font-size: 16px;
  margin: 0 5px;
}
.footer .footMiddle {
  color: #aeaeae;
  margin-bottom: 8px;
}
.footer .footFooter {
  color: #aeaeae;
}
.bigLogo img {
  width: 500px;
  height: 368px;
}
</style>
